<template>
    <div class="weather-wrap">
        <div
            class="weather"
            v-if="weatherInfo"
        >
        <span><span style="color:#FFB92B">【 </span>{{weatherInfo.city}}<span style="color:#FFB92B"> 】</span></span>
            <img
                class="weatherIco"
                :src="weatherIco"
                alt=""
            >
            <div class="temperature">{{weatherInfo.temperature}}<i class="company">°</i></div>
            <div class="weather-info">
                
                <span :title="weatherInfo&&(weatherInfo.winddirection + '风' + weatherInfo.windpower + '级').length>5?weatherInfo.weather + ' ' + weatherInfo.winddirection + '风' + weatherInfo.windpower + '级':''">
                    <span>{{weatherInfo.weather}}</span>
                    {{weatherInfo.winddirection + '风' + weatherInfo.windpower + '级'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            weatherInfo: null,
            hyDate: new Date(),
            curTimeYear: new Date().getFullYear(),
            curTimeMonth:
                new Date().getMonth() + 1 < 10
                    ? '0' + (new Date().getMonth() + 1)
                    : new Date().getMonth() + 1,
            curTimeDay:
                new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate(),
            curTimeHour:
                new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours(),
            curTimeMin:
                new Date().getMinutes() < 10
                    ? '0' + new Date().getMinutes()
                    : new Date().getMinutes(),
            curTimeSec:
                new Date().getSeconds() < 10
                    ? '0' + new Date().getSeconds()
                    : new Date().getSeconds(),
        };
    },
    mounted () {

    },
   
    // computed: {
    //     'weatherIco' () {
    //         if (this.weatherInfo && this.weatherInfo.weather) {
    //             switch (this.weatherInfo.weather) {
    //                 case '阴':
    //                     return require('../assets/image/top/weather-icon/yin.png');
    //                     break;
    //                 case '浮尘':
    //                     return require('../assets/image/top/weather-icon/fuchen.png');
    //                     break;
    //                 case '冷雪' || '阵雪':
    //                     return require('../assets/image/top/weather-icon/lengxue.png');
    //                     break;
    //                 case '霾' || '中度霾':
    //                     return require('../assets/image/top/weather-icon/mai.png');
    //                     break;
    //                 case '强沙尘暴':
    //                     return require('../assets/image/top/weather-icon/qiangshechenbao.png');
    //                     break;
    //                 case '沙尘暴':
    //                     return require('../assets/image/top/weather-icon/shechenbao.png');
    //                     break;
    //                 case '暴雨' || '大暴雨':
    //                     return require('../assets/image/top/weather-icon/baoyu.png');
    //                     break;
    //                 case '冰雹':
    //                     return require('../assets/image/top/weather-icon/bingbao.png');
    //                     break;
    //                 case '大雪' || '雪' || '暴雪' || '中雪-大雪' || '大雪-暴雪':
    //                     return require('../assets/image/top/weather-icon/daxue.png');
    //                     break;
    //                 case '大雨' || '雨' || '大雨-暴雨' || '暴雨-大暴雨' || '大暴雨-特大暴雨':
    //                     return require('../assets/image/top/weather-icon/dayu.png');
    //                     break;
    //                 case '多云' || '少云' || '晴间多云':
    //                     return require('../assets/image/top/weather-icon/duoyu.png');
    //                     break;
    //                 case '雷雨' || '雷阵雨' || '雷阵雨并伴有冰雹' || '特大暴雨' || '强阵雨' || '强雷阵雨':
    //                     return require('../assets/image/top/weather-icon/leiyu.png');
    //                     break;
    //                 case '沙尘':
    //                     return require('../assets/image/top/weather-icon/shachen.png');
    //                     break;
    //                 case '霜':
    //                     return require('../assets/image/top/weather-icon/shuang.png');
    //                     break;
    //                 case '雾霾' || '重度霾' || '严重霾':
    //                     return require('../assets/image/top/weather-icon/wumai.png');
    //                     break;
    //                 case '小雪' || '小雪-中雪':
    //                     return require('../assets/image/top/weather-icon/xiaoxue.png');
    //                     break;
    //                 case '小雨' || '毛毛雨/细雨' || '小雨-中雨':
    //                     return require('../assets/image/top/weather-icon/xiaoyu.png');
    //                     break;
    //                 case '小雨转晴':
    //                     return require('../assets/image/top/weather-icon/xiaoyuzhuanqing.png');
    //                     break;
    //                 case '雪转晴':
    //                     return require('../assets/image/top/weather-icon/xuezhuanqing.png');
    //                     break;
    //                 case '夜':
    //                     return require('../assets/image/top/weather-icon/ye.png');
    //                     break;
    //                 case '夜多云':
    //                     return require('../assets/image/top/weather-icon/yeduoyun.png');
    //                     break;
    //                 case '雨夹雪' || '雨雪天气' || '阵雨夹雪':
    //                     return require('../assets/image/top/weather-icon/yujiaxue.png');
    //                     break;
    //                 case '中雪':
    //                     return require('../assets/image/top/weather-icon/zhongxue.png');
    //                     break;
    //                 case '中雨' || '阵雨' || '极端阵雨' || '中雨-大雨' || '冻雨':
    //                     return require('../assets/image/top/weather-icon/zhongyu.png');
    //                     break;
    //                 case '雾' || '浓雾' || '强浓雾' || '轻雾' || '大雾' || '特强浓雾':
    //                     return require('../assets/image/top/weather-icon/wu.png');
    //                     break;
    //                 case '扬沙':
    //                     return require('../assets/image/top/weather-icon/yangsha.png');
    //                     break;
    //                 case '有风' || '微风' || '和风' || '清风' || '强风/劲风' || '疾风' || '大风' || '烈风' || '龙卷风' || '风暴' || '狂暴风' || '飓风' || '热带风暴' || '冷':
    //                     return require('../assets/image/top/weather-icon/yangsha.png');
    //                     break;
    //                 default:
    //                     return require('../assets/image/top/weather-icon/qing.png');
    //                     break;
    //             }
    //         }
    //     }
    // },
    methods: {
        // getWeather () {
        //     let _this = this;
        //     axios.get('https://restapi.amap.com/v3/ip?key=45c4ad22437d74ee1fc4551e7d8cbfb4').then(res => {
        //         if (res && res.data.status == '1') {
        //             const data = res.data;
        //             let cityType = data.adcode;
        //             axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=45c4ad22437d74ee1fc4551e7d8cbfb4&city=' + cityType).then(response => {
        //                 if (response && response.data.status == '1') {
        //                     const data = response.data.lives[0];
        //                     _this.resetSetItem('weather', JSON.stringify(data));
        //                     _this.weatherInfo = JSON.parse(window.localStorage.getItem('weather'));
        //                 } else {
        //                     if (window.localStorage.getItem('weather')) {
        //                         _this.weatherInfo = JSON.parse(window.localStorage.getItem('weather'));
        //                     }
        //                 }
        //             })
        //         }
        //     })
        // },
    }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
	display: flex;
	justify-content: center;
}
.weather-wrap {
    position: relative;
    color: #fff;
    width: 380px;
    height: 40px;
    line-height: 30px;
    .weather {
        float:left;
        margin-top: -4px;
        .weatherIco {
            position: absolute;
            top: 0px;
            left: 80px;
            width: 27px;
        }
        .temperature {
            font-size: 16px;
            margin-left: 30px;
            display: inline-block;
            margin-right: 7px;
            .company {
                font-size: 22px;
                font-style: normal;
            }
        }
        .weather-info {
            display: inline-block;
            font-size: 14px;
            p {
                width: 145px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                span {
                    margin-right: 5px;
                }
            }
        }
    }
     .time {
        font-size: 14px;
        float: right;
        margin-right: 35px;
        span:nth-child(2) {
            margin-left: 6px;
        }
    }
}
</style>